<template>
         <div class="transfer">
             <div class="box">
                <Header/>
                <div class="list-content">
                   <!-- 左侧列表项 -->
                 <ListItem :data="leftListData" @check-box-clik ="checkBoxClik" :left-or-right="'left'"/>
                </div>
             </div>   
             <div class="hander-btn">
               <!-- 中间区域 左右两侧按钮 -->
                <HandlerBtn
                @rightBtnClick = "rightBtnClick"
                @leftBtnClick = "leftBtnClick"
                :left-disabled="btnStatus.leftBtn"
                :right-disabled="btnStatus.rightBtn"
                />
             </div>
             <div class="box">
                <Header/>
                <div class="list-content">
                   <!-- 右侧列表栏 -->
                <ListItem :data="rightListData" @check-box-clik ="checkBoxClik" :left-or-right="'right'"/>
                </div>
             </div> 
        </div>
</template>
<script setup lang="ts">
import Header from '@/components/transfer/Header.vue'
import HandlerBtn from '@/components/transfer/HandlerBtn.vue'
import ListItem from '@/components/transfer/ListItem.vue'
// 自义传入数据
const data = [
      {
        id: 1,
        name: 'Mate 60 Pro',
        disabled: false
      },
      {
        id: 2,
        name: 'P60 Pro',
        disabled: true
      },
      {
        id: 3,
        name: 'P70 Pro',
        disabled: false
      },
      {
        id: 4,
        name: 'Mate Xs 6',
        disabled: false
      }
    ]

import {useCheckData, useRightData, useLeftData} from '../extedns/hooks';

//获取选中数据的左右容器和设置该数据的方法供视图使用
const [checkedData, addCheckedData, delCheckedData] =useCheckData();
//获取右侧列表数据
const [rightListData, addRightData, delRightData] = useRightData([],checkedData);
//获取左侧数据及添加状态的按钮
const [leftListData, btnStatus] =useLeftData(data,rightListData,checkedData);

 //勾选某项复选框添加至临时左侧/右侧容器或从该容器中删除某项
  // leftOrRight left:操作左侧数据 right:操作右侧数据
  // item 当前点击节点数据
  // addOrDel true:选种调用增加方法  false:取消选种调用删除方法
const checkBoxClik = (leftOrRight,item, addOrDel)=>{
  // 点击左边的列表item  leftOrRight 参数就是'left'
  if(addOrDel){
  addCheckedData(item,leftOrRight);
}else{
  delCheckedData(item,leftOrRight);
}

}
// 点击右侧按钮添加 checkedData.left
const rightBtnClick = () =>{
  addRightData(checkedData.left);
}

// 点击左内里侧按钮删除 checkedData.right
const leftBtnClick = () =>{
  delRightData(checkedData.right);
}

</script>
<style lang="scss">   
.transfer {
        display: flex;
        flex-direction: row;
        width: 450px;
        height: 300px;
        margin-top: 5px;
        
      
        .box {
          width: 150px;
          height: 100%;
          border: 1px solid #ddd;
          border-radius: 3px;
          box-sizing: border-box;
      
          &.button-group {
            border: 1px solid #fff;
          }
      
          .list-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            margin-top: 5px;
            margin-left: 6px;
          }
        }
      }
</style>
